<template>
  <div class="wyySider-main">
	  <div class="main-top">
		  <h5>推荐</h5>
		  <ul>
		  	<li><span><i class="iconfont icon-yinle"></i></span>发现音乐</li>
			<li><span><i class="iconfont icon-yinle"></i></span>私人FM</li>
			<li><span><i class="iconfont icon-MV"></i></span>MV</li>
			<li><span><i class="iconfont icon-pengyou"></i></span>朋友</li>
		  </ul>
	  </div>
	  <div class="main-top">
	  		  <h5>我的音乐</h5>
	  		  <ul>
	  		  	<li><span><i class="iconfont icon-pengyou"></i></span>本地</li>
	  			<li><span><i class="iconfont icon-daoruxuanzhong"></i></span>下载管理</li>
	  			<li><span><i class="iconfont icon-B"></i></span>我的音乐云盘</li>
	  			<li><span><i class="iconfont icon-geshou"></i></span>我的歌手</li>
				<li><span><i class="iconfont icon-diantai"></i></span>我的电台</li>
	  		  </ul>
	  </div>
	  <div class="main-top">
			  <Collapse simple>
		          <Panel name="1">
		               <h5>我创建的歌单</h5>
		              <p slot="content">
						  <ul>
						  	<li><span><i class="iconfont icon-xihuan"></i></span>我喜欢的音乐</li>
						  	<li><span><i class="iconfont icon-jiarugedan"></i></span>小问号的歌</li>
						  	<li><span><i class="iconfont icon-jiarugedan"></i></span>大问号的歌</li>
						  </ul>
					  </p>
		          </Panel>
		      </Collapse>
	  </div>
	  <div class="main-top">
	  			  <Collapse simple>
	  		          <Panel name="1">
	  		               <h5>我收藏的歌单</h5>
	  		              <p slot="content">
	  						  <ul>
	  						  	<li><span><i class="iconfont icon-jiarugedan"></i></span>小问号的歌</li>
	  						  	  			<li><span><i class="iconfont icon-jiarugedan"></i></span>小问号的歌</li>
	  						  	  			<li><span><i class="iconfont icon-jiarugedan"></i></span>大问号的歌</li>
	  						  </ul>
	  					  </p>
	  		          </Panel>
	  		      </Collapse>
	  </div>
  </div>
</template>
<script>
export default{
  data () {
    return {

    }
  },
  components: {

  },
  methods: {

  }
}
</script>

<style scoped="scoped">
	.wyySider-main{
		font-family: '微软雅黑';
		width: 200px;
		height: 100vh;
		background-color: #E5E5E5;
	}
	.main-top{
		/* padding: 10px 0; */
	}
	.main-top h5{
		font-size: 13px;
		padding: 3px 0;
		color: #999999;
	}
	>>>.ivu-collapse>.ivu-collapse-item>.ivu-collapse-header{
		display: flex;
		align-items: center;
		padding: 0;
		border: none;
	}
	>>> .ivu-collapse-content{
		padding: 0!important;
	}
	.main-top ul li{
		display: flex;
		align-items: center;
		color: #999999;
		font-size: 12px;
		padding: 5px 5px 5px 20px;
		cursor: pointer;
	}
	.main-top ul li span{
		margin: 0 6px;
	}
	.main-top ul li:hover{
		background-color: #FF0000;
	}
</style>
